<template lang="pug">
  .page.h-100
    .clearfix
      .search-form.mb-10.pl-10.pr-10
        Form.ivu-row.ivu-form-basic(ref="formData" :model="formData" :rules="rules" :label-width="110")
          FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of formItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop")
            template(v-if="item.type === 'select'")
              Select(v-model="formData[item.model]" :placeholder="item.placeholder" clearable filterable)
                Option(
                  v-for="(c_item, index) in arrListDown[item.options]"
                  :value="c_item.value"
                  :key="index"
                ) {{ c_item.label }}
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder")
            template(v-if="item.type === 'text'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder" disabled)
            template(v-if="item.type === 'button'")
              Button(type="info" @click="searchFn") 查询

      .pl-20.pr-20.bg-white
        Table.hasTitle-table.beautiful-table(:columns="setThead" :data="tableData" :stripe="true" ref="demoTable" @on-selection-change="handleOnSelectChange")
          .clearfix.font-16(slot="header")
            .table-title-lefttxt.pull-left
              |合计
              span.text-info.pl-5.pr-5.font-weight {{tableComone.totalRows}}
              |条
            .pull-right.table-title-btns
              Button.mr-10(v-if="hasAdd && fromPage !== 'receivableList' && claimMethod != 3" type="info" @click="handleShowCreateModal('createModal', null)") 新增
              Button.mr-10(v-if="hasAdd && fromPage !== 'receivableList' && claimMethod == 3" type="info" @click="handleShowCreateTreatClaimModal('createModal', null)") 新增
              Button(type="info" @click="goback") 返回
          .clearfix.pl-20.pr-20(slot="footer")
            Page(
              :total="tableComone.totalRows"
              @on-change="onChangePage"
              @on-page-size-change="onpageSizeChange"
              show-sizer
              show-total
              placement="top"
              prev-text="上一页"
              next-text="下一页"
              :page-size-opts="[10, 20, 30, 50, 100]"
            )
          template(slot-scope="{ row, index }" slot="action")
            Button.mr-10(v-if="hasToBack && fromPage !== 'receivableList'" type="text" size="small" @click="isBackModal(row.id)") 回退
            Button.mr-10(v-if="hasView && row.claimType != 3" type="text" size="small" @click="handleShowCreateModal('lookModal', row.id)") 查看
            Button.mr-10(v-if="hasView && row.claimType == 3" type="text" size="small" @click="handleShowCreateTreatClaimModal('lookModal', row.id)") 查看待遇认领
      
    //- 新建弹窗
    CreateModal(ref="CreateModal" @query="searchFn")
    //- 新建待遇认领弹窗
    CreateTreatClaimModal(ref="CreateTreatClaimModal" @query="searchFn")

</template>

<script>
// import { Common } from '@/utils/common.js'
// import { FinanceApi } from '@/api/Finance.api.js'
import { FinanceReceivableClaimApi } from '@/api/FinanceReceivableClaim.api.js'
import { PageListThead, PageListTheadTreatClaim } from './tableHead.js'
import _cloneDeep from 'clone-deep'
import CreateModal from './modal/CreateModal.vue'
import CreateTreatClaimModal from './modal/CreateTreatClaimModal.vue'

import { mapMutations } from 'vuex'
import { constants } from 'zlib';

export default {
  // name: 'billClaim', // 账单认领页面

  components: {
    CreateModal,
    CreateTreatClaimModal,
  },

  computed: {
    setThead () {
      if (this.$route.query.claimMethod == 3) {
        return this.theadTreatClaim
      } else {
        return this.thead
      }
    },

    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasGetReceivableList () {
      return this.actionArr.indexOf('GetReceivableList') > -1
    },
    // 导出
    hasExport () {
      return this.actionArr.indexOf('Export') > -1
    },
    // 回退
    hasToBack () {
      return this.actionArr.indexOf('ToBack') > -1
    },
    // 查看
    hasView () {
      return this.actionArr.indexOf('View') > -1
    },
    // 增加
    hasAdd () {
      console.log(111111111111111111)
      console.log(this.actionArr.indexOf('Add') > -1)
      return this.actionArr.indexOf('Add') > -1
    }
  },

  data () {
    return {
      claimMethod: null,
      fromPage: null,
      thead: _cloneDeep(PageListThead),
      theadTreatClaim: _cloneDeep(PageListTheadTreatClaim),
      tableData: [],
      selectedId: [], // 勾选的id集合,array格式
      selectedArr: [], // 勾选的id, name数组集合
      tableComone: {
        pageIndex: 1,
        totalRows: 0,
        pageSize: 10
      },
      formData: {
        receiveID: null,
        matchGuid: null,
        matchRemark: null,
        amt: null,
        remain: null,
        bankName: null,
        dealTime: null,
        accountName: null,
        accountNo: null,
        remark: null,
        companyName: null,
      },
      formItem: [
        { type: 'text', label: '到款金额：', placeholder: '', prop: 'amt', model: 'amt', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-12 ivu-col-span-xxl-8' },
        { type: 'text', label: '剩余认领金额：', placeholder: '', prop: 'remain', model: 'remain', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-12 ivu-col-span-xxl-8' },
        { type: 'text', label: '到款银行：', placeholder: '', prop: 'bankName', model: 'bankName', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-12 ivu-col-span-xxl-8' },
        { type: 'text', label: '到款时间：', placeholder: '', prop: 'dealTime', model: 'dealTime', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-12 ivu-col-span-xxl-8' },
        { type: 'text', label: '对方户名：', placeholder: '', prop: 'accountName', model: 'accountName', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-12 ivu-col-span-xxl-8' },
        { type: 'text', label: '对方账号：', placeholder: '', prop: 'accountNo', model: 'accountNo', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-12 ivu-col-span-xxl-8' },
        { type: 'text', label: '备注：', placeholder: '', prop: 'remark', model: 'remark', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-12 ivu-col-span-xxl-8' },
        { type: 'input', label: '客户名称：', placeholder: '', prop: 'companyName', model: 'companyName', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-12 ivu-col-span-xxl-8' },
        { type: 'button', style: 'ivu-col-span-md-24 ivu-col-span-lg-12 ivu-col-span-xl-12 ivu-col-span-xxl-8' }
      ],
      arrListDown: {
        matchResultOps: [
          {label: '有差额', value: '有差额'},
          {label: '无差额', value: '无差额'},
          {label: '待认领', value: '待认领'},
        ]
      },
      rules: {}
    }
  },

  mounted () {
    console.log(this.$route,'this.$route')
    var queryData = this.$route.query
    this.fromPage = queryData.fromPage
    this.claimMethod = this.$route.query.claimMethod
    console.log('⭐ queryData: ', queryData)
    Object.keys(this.formData).forEach(key => {
      this.formData[key] = queryData[key]
    })

    this.query()
  },

  methods: {
    ...mapMutations([
      'closeTag'
    ]),
    // 监听所有调用的方法
    listenCall (methodsWords, ...values) {
      this[methodsWords](...values)
    },
 
    // 搜索
    searchFn () {
      this.tableComone.pageIndex = 1
      this.query()
    },

    /**
     * 分页页码变动
     * @param {Number} val pageIndex
     */
    onChangePage (val) {
      this.tableComone.pageIndex = val
      this.query()
    },
    /**
     * 分页页码变动
     * @param {Number} val pageSize
     */
    onpageSizeChange (val) {
      this.tableComone.pageIndex = 1
      this.tableComone.pageSize = val
      this.query()
    },
    /**
     * 分页查询接口
     * @param {Object} obj {pageIndex, pageSize}
     */
    async query () {
      var params = {
        Id: this.$route.query.receiveID,
        CompanyName: this.formData.companyName,
        HasPaging: true,
        PageIndex: this.tableComone.pageIndex,
        PageSize: this.tableComone.pageSize
      }
      let res = await FinanceReceivableClaimApi.getClaimList(params)
      console.log('获取列表res: ', res)
      if (res.status === 200 && res.data.success) {
        this.tableData = res.data.data
        this.tableComone.totalRows = res.data.totalRows
      } else {
        this.tableData = []
      }
    },

    // 表格选择操作
    handleOnSelectChange (value) {
      this.selectedArr = value.map((item) => {
        return item
      })
      this.selectedId = value.map((item) => {
        return item.id
      })
      console.log('列表勾选数组1', this.selectedArr)
      console.log('列表勾选数组2', this.selectedId)
    },

    // 显示新建/编辑弹窗
    handleShowCreateModal (modalKey, id) {
      this.$refs.CreateModal.modalKey = modalKey
      switch(modalKey){
        case 'createModal' :
          this.$refs.CreateModal.createModalTitle = '新建账单认领'
          break;
        case 'lookModal' :
          this.$refs.CreateModal.createModalTitle = '查看账单认领'
          break;
      }

      this.$refs.CreateModal.receivableCompanys(this.formData.receiveID, this.formData.matchRemark)

      if (id) {
        this.$refs.CreateModal.getModel(id)
      } else {
        this.$refs.CreateModal.show(this.formData)
      }
    },

    // 显示新建/编辑待遇认领弹窗
    handleShowCreateTreatClaimModal (modalKey, id) {
      this.$refs.CreateTreatClaimModal.modalKey = modalKey
      switch(modalKey){
        case 'createModal' :
          this.$refs.CreateTreatClaimModal.createModalTitle = '新建待遇认领'
          break;
        case 'lookModal' :
          this.$refs.CreateTreatClaimModal.createModalTitle = '查看待遇认领'
          break;
      }

      this.$refs.CreateTreatClaimModal.receivableCompanys(this.formData.receiveID, this.formData.matchRemark)

      if (id) {
        this.$refs.CreateTreatClaimModal.getModel(id)
      } else {
        this.$refs.CreateTreatClaimModal.show(this.formData)
      }
    },

    // 是否回退前询问
    isBackModal (id) {
      this.$Modal.confirm({
        title: '确认是否回退',
        onOk: () => {
          this.handleBack(id)
        }
      })
    },

    // 回退
    handleBack (id) {
      FinanceReceivableClaimApi.back({id: id}).then(resp => {
        console.log('回退resp: ', resp)
        if (resp.status === 200 && resp.data.success) {
          this.$Message.success(resp.data.message)
          this.query()
        } else {
          this.$Message.error(resp.data.message)
        }
      })
    },

    // 返回上一页
    goback () {
      this.closeTag({
        name: 'billClaim'
      })
    }
  } // methods end
}
</script>

<style lang="less" scoped>

</style>
